<template>
  <div class="content-wrap tables-day">
    <div class="content-box">
      <div :class="leftClass">
        <content-left />
      </div>
      <div :class="centerClass">
        <content-center />
      </div>
      <div :class="rightClass">
        <content-right />
      </div>
    </div>
  </div>
</template>
<script>
import { createNamespacedHelpers } from 'vuex'
import ContentLeft from './components/ContentLeft'
import ContentCenter from './components/ContentCenter'
import ContentRight from './components/ContentRight'
const { mapState, mapActions } = createNamespacedHelpers('tablesDay')

export default {
  name: 'tables-day',
  components: {
    ContentLeft,
    ContentCenter,
    ContentRight
  },
  beforeDestroy() {
    this.clearStore()
  },
  computed: {
    ...mapState(['collapseLeftFlag', 'collapseRightFlag']),
    leftClass() {
      let _cls = 'content-left'
      if (this.collapseLeftFlag) {
        _cls += ' w0'
      }
      return _cls
    },
    rightClass() {
      let _cls = 'content-right'
      if (this.collapseRightFlag) {
        _cls += ' w0'
      }
      return _cls
    },
    centerClass() {
      let _cls = 'content-center'
      if (this.collapseLeftFlag) {
        _cls += ' l0'
      }
      if (this.collapseRightFlag) {
        _cls += ' r0'
      }
      return _cls
    }
  },
  methods: {
    ...mapActions(['clearStore'])
  }
}
</script>
<style lang="less" scoped>
.content-wrap {

  .w0 {
    width: 0!important;
    padding: 0;
    margin: 0;
    display: none !important;
  }

  .l0 {
    left: 0;
  }

  .r0 {
    right: 0;
  }

  .content-box {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .content-left,
  .content-right {
    position: absolute;
    width: 25%;
  }

  .content-left,
  .content-center,
  .content-right {
    bottom: 0;
  }
}

.content-left {
  top: 0;
  left: 0;
  padding-left: 10px;
  overflow: hidden;
}

.content-center {
  position: absolute;
  top: 0;
  left: 25%;
  right: 25%;
  padding: 0 10px;
  box-sizing: border-box;
  overflow: hidden;
}

.content-right {
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  padding-right: 10px;
  overflow: hidden;
}
</style>
